<template>
  <div class="dashboard">
    <topAndbottom>
      <template #title>异常管理</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="tableData.search" label-width="80px" @submit.native.prevent="" :inline="true" size="default">
              <el-form-item label="数据状态">
                <!-- <el-input v-model="tableData.search.queryType" @keyup.enter.native="" clearable @clear="" /> -->
                <el-select v-model="tableData.search.status" @change="getTableList" class="m-2"
                  placeholder="请选择数据类型..." size="default">
                  <el-option label="待激活" value="0" />
                  <el-option label="待处理" value="1" />
                  <el-option label="已完成" value="2" />
                  <el-option label="已终止" value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label="异常类型">
                <!-- 需要三个按钮嘛 -->
                <el-radio-group v-model="tableData.search.queryType"  @change="getTableList">
                  <el-radio :label="0" size="" border>我的任务</el-radio>
                  <el-radio :label="1" size="" border>全部任务</el-radio>
                  <el-radio :label="2" size="" border>由我创建</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <!-- <el-button :icon="Search" @click="serachBtn">搜索</el-button> -->
                <!-- <el-button style="color: #FF7670;" :icon="Close" @click="resetBtn">重置</el-button> -->
                <!-- <el-button :icon="Plus" type="primary" @click="addBtn">新增</el-button> -->
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <Table @assignBtn="assignBtn" @abnormalLookbtn="abnormalLookbtn" @delAbnormalBtn="delAbnormalBtn"
              @stopBtn="stopBtn" @finishBtn="finishBtn" :tableHeigth="tableData.tableHeigth" :tableData="tableData.list"
              :loading="tableData.Loading">
            </Table>
            <!-- <el-tabs type="border-card" @tab-click="addTab">
              <el-tab-pane :label="item.title" v-for="(item, index) in tableData.tabList" :key="index">
                <Table @assignBtn="assignBtn" @abnormalLookbtn="abnormalLookbtn" @delAbnormalBtn="delAbnormalBtn" 
                :tableHeigth="tableData.tableHeigth" :tableData="tableData.list" :loading="tableData.Loading">
                </Table>
              </el-tab-pane>

            </el-tabs> -->
          </div>
          <div class="container-footer">
            <el-pagination v-model:current-page="tableData.search.page" v-model:page-size="tableData.search.size"
              :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </template>

    </topAndbottom>
    <!-- 异常单详情查看 -->
    <Abnormal ref="RefAbnormal"></Abnormal>
    <!-- 异常单指派 -->
    <dispatchList ref="RefDispatchList" :userList="tableData.userList" @saveDispatch="saveDispatch"></dispatchList>
  </div>
</template>

<script setup lang='ts'>
import Table from './component/Table.vue'
import dispatchList from './component/dispatchList.vue'
import { Search, Plus, Edit, Close } from '@element-plus/icons'
import { reactive, toRefs, onBeforeMount, ref, onMounted } from 'vue'
import assignModel from './composables/assignModel'
import abnormalDetail from './composables/abnormalDetail'
import dispatchModel from './composables/dispatchListModel'
const { searchParams, tableData, addTab, resetBtn, addBtn, serachBtn, handleSizeChange, handleCurrentChange, delBtn, getTableList } = assignModel()
const { RefAbnormal, lookDetail, assignBtn1 } = abnormalDetail()
const { RefDispatchList, assignDiapatchBtn, saveDispatch } = dispatchModel(getTableList)
const abnormalLookbtn = (row?) => {
  lookDetail(row)
}
const delAbnormalBtn = (row?) => {
  delBtn(row)
}
const assignBtn = (row, action) => {
  assignDiapatchBtn(row, action)
}
const stopBtn = (row, action) => {
  assignDiapatchBtn(row, action)
}
const finishBtn = (row, action) => {
  assignDiapatchBtn(row, action)
}
</script>
<style scoped lang='scss'>
.dashboard {
  height: 100%;

  :deep(.el-tabs--border-card) {
    background-color: transparent !important;
    border: none;
  }

  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>